<template>
  <div class="zlcBaseItemPopup" :data-remark="true" @click="closeModel" v-show="visible">
      <div class="main">
          <div class="closeIcon" :data-remark="true" @click="closeModel">
              x
          </div>
          <div class="header" v-gradientTitle>
              {{ datas.projectName }}
          </div>
          <div class="data">
            <table class="zlcTable" rules="all">
                <tbody>
                  <tr>
                      <td>所属基地</td>
                      <td>{{ datas.baseId_dictText }}</td>
                      <td>项目名称</td>
                      <td>{{ datas.projectName }}</td>
                  </tr>
                  <tr>
                      <td>项目经费</td>
                      <td>{{ datas.money }}</td>

                      <td>年度</td>
                      <td>{{ datas.year }}</td>
                  </tr>
                  <tr>
                      <td>范围</td>
                      <td>{{ datas.scope }}</td>
                      <td>联系人电话</td>
                      <td>{{ datas.contactsPhone }}</td>
                  </tr>
                  <tr>
                      <td>专项资金</td>
                      <td>{{ datas.specialFunds }}</td>
                      <td>单位配套资金</td>
                      <td>{{ datas.unitMatchingFunds }}</td>
                  </tr>
                  <tr>
                      <td>项目小类</td>
                      <td colspan="3">{{ datas.secondaryType_dictText }}</td>
                  </tr>
                </tbody>
            </table>
              <div class="other" v-for="(item, index) in otherField" :key="index">
                  <form action="" class="zlcForm">
                      <fieldset class="fieldset">
                          <legend>{{ item.name }}</legend>
                          <div>
                              {{ datas[item.field] || '---' }}
                          </div>
                      </fieldset>


                  </form>
              </div>
              <div class="files">
                  <form action="" class="zlcForm">
                      <fieldset class="fieldset">
                          <legend>相关附件</legend>
                          <a-tree
                                  showLine
                                  showIcon
                                  :fieldNames="fieldNames"
                                  :tree-data="treeData"
                                  @select="selectTree"
                          >

                              <template #title="props">
                        <span v-if="props.isParent">
                            <img src="/src/assets/files.png" alt="" class="zlcIcon">
                        </span>
                                  <a-tooltip>
                                      <template slot="title">
                                          {{ props.title }}
                                      </template>
                                      {{ props.title }}
                                  </a-tooltip>
                                  <span class="fileNum">
                            {{ props.isParent ? props.child.length : '' }}
                        </span>
                              </template>

                              <template v-slot:png>
                                  <img src="/src/assets/pngIcon.png" alt="" class="zlcIcon">
                              </template>
                              <template v-slot:pdf>
                                  <img src="/src/assets/pdfIcon.png" alt="" class="zlcIcon">
                              </template>
                              <template v-slot:docx>
                                  <img src="/src/assets/docxIcon.png" alt="" class="zlcIcon">
                              </template>
                              <template v-slot:xlsx>
                                  <img src="/src/assets/xlsxIcon.png" alt="" class="zlcIcon">
                              </template>
                              <template v-slot:video>
                                  <img src="/src/assets/videoIcon.png" alt="" class="zlcIcon">
                              </template>
                          </a-tree>
                      </fieldset>
                  </form>
              </div>
          </div>

      </div>
  </div>
</template>

<script>
  import { reactive, ref, computed, watch} from "vue";
  import { api as viewerApi } from "v-viewer"

  export default{
      name: 'zlcBaseItemPopup',
      props:{
        datas:{
            type: Object,
            default(){
                return {}
            }
        }
      },
      setup(props, ctx){
          let staticUrl = import.meta.env.VITE_APP_API_BASE_URL
          let downLoadUrl = import.meta.env.VITE_UPLOADFILE_URL
          let filesField = reactive([
              {
                  name: '上年度项目实施情况说明',
                  field: 'annualStatement'
              },
              {
                  name: '询价情况',
                  field: 'inquiryStatus'
              },
              {
                  name: '概算表',
                  field: 'approximateEstimates'
              },
              {
                  name: '立项申请资料',
                  field: 'projectApplication'
              },
              {
                  name: '申报表资料',
                  field: 'declarationForm'
              },
              {
                  name: '汇总表资料',
                  field: 'summarySheet'
              },
              {
                  name: '可行性报告资料',
                  field: 'feasibilityReport'
              },
              {
                  name: '会议纪要',
                  field: 'minutesMeeting'
              },
              {
                  name: '配置资金承诺',
                  field: 'allocationCommitment'
              },
              {
                  name: '其他附件',
                  field: 'attachment'
              },
          ])
          let visible = ref(false)
          let filesArr = computed(() => {
              return files => {
                  return props.datas[files] ? props.datas[files].split(',') : []
              }
          })
          let type = computed(() => {
              return data => {
                  return data.split('.').at(-1)
              }
          })
          let otherField = ref([
              {
                  name: '项目概况及内容',
                  field: 'projectOverviewContent'
              },
              {
                  name: '项目必要性依据',
                  field: 'projectNecessityBasis'
              },
              {
                  name: '实施计划',
                  field: 'implementationPlan'
              },{
                  name: '备注',
                  field: 'remark'
              }

          ])
          let closeModel = ($event) => {
              if($event.target.dataset.remark){
                  visible.value = false
              }
          }
          let showModel = () => {
              visible.value = true
          }

          let treeData = ref([])

          let selectTree = (selectkeys, { selected, node } = e) => {
              if(!selected) return
              if(node.slots.icon == 'png'){
                  const $viewer = viewerApi({
                      images: [staticUrl + node.file]
                  })
              }else if(node.slots.icon == 'pdf'){
                  let url = `${staticUrl}generic/web/viewer.html?file=${downLoadUrl}${node.file}`
                  window.open(url)
              }else{
                  window.open(downLoadUrl + node.file)
              }
          }

          let fieldNames = ref({
              children: 'child',
              title: 'name',
              key: 'key'
          })

          let fileName = file => {
              if(file){
                  return file.split("_")[0].split("/")[1] + "." + file.split('.')[1]
              }else{
                  return ''
              }
          }

          let iconType = type => {
              let pdfArr = ['pdf','pdfx','ppt','pptx']
              let docArr = ['docx', 'doc']
              let xls = ['xlsx', 'xls']
              let videoArr = ['avi','wmv','mpeg','mpg','mp4','swf','flv','rm','ram','mov']
              if(pdfArr.includes(type)){
                  return 'pdf'
              }else if(docArr.includes(type)){
                  return 'docx'
              }else if(xls.includes(type)){
                  return 'xlsx'
              }else if(videoArr.includes(type)) {
                  return "video"
              }else{
                  return 'png'
              }
          }

          watch(() => props.datas, newVal => {
              if(!newVal) return
              let a = []

              filesField.forEach((item, index) => {
                  a.push({
                      title: item.name,
                      key: "0-" +index,
                      isParent: true,
                      child: newVal[item.field] ? newVal[item.field].split(",").map((i, ind) => {
                          let type = i.split('.')[1]
                          return {
                              name: fileName(i),
                              key: "0-" +index + ind,
                              title: fileName(i),
                              file: i,
                              slots: {
                                  icon: iconType(type)
                              }
                          }
                      }) : []
                  })

              })

              treeData.value = a

          }, { deep: true })


          return {
              staticUrl,
              filesField,
              visible,
              filesArr,
              type,
              otherField,
              closeModel,
              showModel,
              selectTree,
              fieldNames,
              treeData,
              fileName,
              iconType
          }
      }
  }
</script>

<style lang="less" scoped>
.zlcBaseItemPopup{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  //transform: translateY(-50px);
  .main{
    width: 1000px;
    height: 700px;
    background: rgba(20, 24, 45, 0.8);
    position: relative;
    z-index: 999;
    .closeIcon{
      width: 40px;
      height: 40px;
      position: absolute;
      right: -20px;
      top: -20px;
      text-align: center;
      line-height: 40px;
      border-radius: 50%;
      background: rgba(0, 108, 222, 0.5);
      cursor: pointer;
      color: #fff;
      &:hover{
        background: rgba(255, 0, 0, .5)
      }
    }
    .header{
      font-size: 24px;
      text-align: center;
      line-height: 80px;
    }
    .data{
      padding: 0 20px;
      box-sizing: border-box;
      width: 100%;
      height: calc(100% - 80px);
      overflow-y: auto;
      /* 滚动条优化 start */
      &::-webkit-scrollbar {
        width: 6px;
        height: 6px;
      }

      /* 无内容时的滚动条样式 */
      &::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 4px;
        background: rgba(0, 0, 0, 0.1);
      }

      /* 有内容时的滚动条样式 */
      &::-webkit-scrollbar-thumb {
        background: rgba(0, 147, 161, 1);
        border-radius: 4px;
      }

      &::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 147, 161, .8);
      }

      &::-webkit-scrollbar-corner {
        background: rgba(0, 0, 0, 0.1);
      }

      /* 滚动条优化 end */

      .zlcTable{
        width: 100%;
        border: 1px solid rgba(0, 108, 222, 1);
        border-collpase: collapase;
        tr{
          td{
            text-align: center;
            line-height: 40px;
          }
          td:nth-of-type(odd){
            color: #367feb;
            font-weight: bold;
            width: 150px;
          }
          td:nth-of-type(even){
            max-width: calc(500% - 150px);
            color: #fff;
            font-weight: bold;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
      .other{
        color: #fff;
        margin: 20px 0;
        &:deep(.fieldset) {
          margin-bottom: 20px;
          padding: 10px;
          border: 1px solid rgba(0, 108, 222, 1);

          legend {
            font-size: 20px;
            width: fit-content;
          }
        }
      }
      .files{
        color: #fff;
        margin-top: 20px;
        .zlcForm{
          &:deep(.fieldset) {
            margin-bottom: 20px;
            padding: 10px;
            border: 1px solid rgba(0, 108, 222, 1);
            legend{
              font-size: 20px;
              width: fit-content;
            }
            .item{
              margin-bottom: 20px;
              .name{
                height: 28px;
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: center;
                .icon{
                  width: 5px;
                  height: 100%;
                  background: red;
                  display: inline-block;
                  border-radius: 4px;
                  margin-right: 4px;
                }
              }
              .file{
                .img{
                  width: 50px;
                  height: 50px;
                }
              }
            }

            .ant-tree{
              background: transparent;
              color: #fff;
              .ant-tree-treenode-selected{
                color: black;
              }
              .ant-tree-indent-unit{
                &::before{
                  position: absolute;
                  top: 0;
                  inset-inline-end: 12px;
                  bottom: -4px;
                  border-inline-end: 1px solid #3b91f5;
                  content: "";
                }
              }
              .ant-tree-indent-unit.ant-tree-indent-unit-end{
                &::before{
                  position: absolute;
                  top: 0;
                  inset-inline-end: 0px;
                  bottom: -4px;
                  border-inline-end: none;
                  content: "";
                }
              }
              .ant-tree-switcher{
                color: #3b91f5;
              }
              .ant-tree-switcher-noop{
                display:none;
              }
              .zlcIcon{
                width: 18px;
                height: 18px;
              }
              .fileNum{
                width: fit-content;
                height: fit-content;
                padding: 0 18px;
                display: inline-block;
                color: #fff;
                background: rgba(108, 99, 99, 0.5);
                border-radius: 20px;
                margin-left: 5px;
                font-size: 12px;
              }
            }
          }
        }
      }
    }

  }
}
</style>
